<template>
  <div class="main">
    <img :src="$store.state.appBg" class="bg1" alt>
    <div class="logo">
      <img src="@/assets/images/tbkt/msgkk/logo.png" alt>
    </div>
    <div class="title">名师介绍</div>
    <div class="sidebar">
      <scroll-container ref="scrollContainer">
        <multi-list @scrollTo="scrollTo" :groupDatas="groupData" :head="head">
          <ul>
            <li
              :data-index="'tar_0_'+index"
              v-for="(grade,index) in groupData.dataArr[0].data"
              :key="index"
            >
              <img
                class="arrow"
                v-show="groupData.focArr[0][index]"
                src="@/assets/images/tbkt/msgkk/sanjiao.png"
                alt
              >
              <div :class="{active: groupData.focArr[0][index]}">
                <img :src="grade.img" alt>
                <!-- <router-link to="lesson">{{grade}}</router-link> -->
              </div>
            </li>
          </ul>
        </multi-list>
      </scroll-container>
    </div>
    <!--<router-view></router-view>-->
    <msjsintro :groupData="groupData.dataArr[0].data[0]"></msjsintro>
  </div>
</template>
<script>
import scrollContainer from "@/components/base/scroll-container/scroll-container";
import multiList from "@/components/base/multi-list/multi-list";
import msjsintro from "@/components/tbkt/msgkk-msjs-intro";
import imglist_w312 from "../ImgList_w312";

export default {
  name: "tbkt-msgkk-dt",
  components: {
    msjsintro,
    scrollContainer,
    multiList,
    imglist_w312
  },
  data() {
    return {
      groups: [0, 1, 2, 3],
      scrollY: 0,
      backObjName: "tbkt-msgkk-dt",
      hs: this.$store.state.hs,
      bridge: this.$store.state.bridge,
      head: {
        right: "1-0"
      },
      fodderid: this.$route.params.fodderid,
      groupData: {
        dataArr: [
          {
            maxLine: 1,
            dynamic: false,
            title: "",
            data: []
          }
        ],
        focArr: [[]]
      }
    };
  },
  methods: {
    scroll(pos) {
      this.scrollY = pos.y;
    },
    scrollTo(targetIndex) {
      this.$refs.scrollContainer.scrollTo(targetIndex);
    },
    setBackObj(backObj) {
      this.hs.cookie.set(this.backObjName, JSON.stringify(backObj));
    },
    getData(fodderid) {
      let parame = JSON.stringify(
        {
          "head": {
            "clientid": this.bridge.stbid
          },
          "body": {
            "codes": [fodderid],
            "sitecode": "iptvtest", // 站点编码
            "vsitecode": "hzvsite" // 虚拟站点
          }
        }
      )
      this.hs.ajax.post('http://125.210.113.145/WSL/Core/CrossDomain.ashx', this.$qs.stringify({
        url: 'http://irs.wasu.cn:8080/irs_ol/getirs',
        data: encodeURIComponent(parame),
        method: 'post',
        type: 'json'
      }), (response)=>{
        response = JSON.parse(response)
        console.log(response);
        this.groupData.dataArr[0].data = response.contents[0].infoList
      },0,function (msg) {

      },3000)
    }
  },
  created() {
    console.log(this.fodderid);
    this.getData(this.fodderid)
  },
  mounted() {
    this.hs.initFocus("0-0");
    this.hs.addSelect(this.groups, (group, objid, objindex) => {
      // console.log(this.imgListData[group]);
      if (group === 0) {
        if (objindex === 0) {
          // this.setBackObj({ backFocArr: [this.hs.focObj.objid] });
          // this.$router.push("/tbkt_xgkk");
        }
      }
    });
    //  查看是否有记忆焦点
    if (this.hs.cookie.get(this.backObjName)) {
      let backObj = JSON.parse(this.hs.cookie.get(this.backObjName));
      let focArr = backObj.backFocArr;
      this.hs.cookie.delOne(this.backObjName);
      // console.log(JSON.stringify(focArr) + "**************");
      this.hs.initFocus(focArr[0], true);
    }
  }
};
</script>

<style scoped lang="less">
.main {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 1920px;
  height: 1080px;
  display: flex;
  .title {
    position: absolute;
    top: 77px;
    right: 121px;
    font-size: 60px;
    color: #e8e8e8;
  }
  .logo {
    position: absolute;
    top: 88px;
    left: 529px;
    img {
      width: 260px;
      height: 43px;
    }
  }
  .bg1 {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 1920px;
    height: 1080px;
    z-index: -1;
  }
  .sidebar {
    box-sizing: border-box;
    margin-top: 163px;
    margin-left: 104px;
    flex-shrink: 0;
    width: 430px;
    height: 900px;
    // overflow: hidden;
    .multi-container {
      ul {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0;
        padding-top: 20px;
        padding-right: 80px;
        li {
          margin-bottom: 48px;
          padding: 0;
          list-style: none;
          display: block;
          width: 314px;
          height: 418px;
          box-sizing: border-box;
          position: relative;
          div {
            overflow: hidden;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
        .active {
          border: 2px solid #ffffff;
          border-radius: 8px;
          transform: scale(1.1);
          -webkit-transform: scale(1.1);
          position: relative;
        }
        // .active:before {
        //   position: absolute;
        //   content: "";
        //   top: -100px;
        //   left: 100px;
        //   width: 40%;
        //   height: 140%;
        //   transform: rotate(40deg);
        //   background: linear-gradient(
        //     rgba(255, 255, 255, 0.5),
        //     rgba(255, 255, 255, 0.3)
        //   );
        // }
        .arrow {
          right: -50px;
          top: 180px;
          position: absolute;
          content: "";
          width: 25px;
          height: 39px;
          background: url("../../assets/images/tbkt/msgkk/sanjiao.png") center
            no-repeat;
        }
      }
    }
  }
}
</style>
